<!DOCTYPE html>
<html>
    <head>
        <title><?php echo $title ?></title> 
        <link href="<?php echo base_url() ?>/FontAwesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
        <link href="<?php echo base_url() ?>/Bootstrap/bootstrap.min.css" rel="stylesheet" type="text/css"/>
        <link href="<?php echo base_url() ?>/Css/style.css" rel="stylesheet" type="text/css"/>
        <link href="<?php echo base_url() ?>/Fonts/Font_Importer.css" rel="stylesheet" type="text/css"/>
        <script src="<?php echo base_url() ?>/Bootstrap/jquery.js" type="text/javascript"></script>
        <script src="<?php echo base_url() ?>/Bootstrap/bootstrap.min.js" type="text/javascript"></script>
        
        <!-- Google Map JS-->
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript" src="<?php echo base_url() ?>/MapNeed/markerclusterer.js"></script>
        <script type="text/javascript">

            var customIcons = {
                1: {
                    icon: '<?php echo base_url(); ?>/Images/Map_Marker/beach.png'
                },
                2: {
                    icon: '<?php echo base_url(); ?>/Images/Map_Marker/mount.png'
                },
                3: {
                    icon: '<?php echo base_url(); ?>/Images/Map_Marker/shopping.png'
                },
                7: {
                    icon: '<?php echo base_url(); ?>/Images/Map_Marker/playground.png'
                },
                8: {
                    icon: '<?php echo base_url(); ?>/Images/Map_Marker/zoo.png'
                },
                9: {
                    icon: '<?php echo base_url(); ?>/Images/Map_Marker/culinary.png'
                }
            };

            function load(lati, longi, zm) {
                var cluster = [];
                var map = new google.maps.Map(document.getElementById("map-container"), {
                    center: new google.maps.LatLng(lati, longi),
                    zoom: zm,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                });
                var infoWindow = new google.maps.InfoWindow;

                // Bagian ini digunakan untuk mendapatkan data format XML yang dibentuk dalam lokasi.php
                downloadUrl("<?php echo base_url()?>/MapNeed/lokasi.php", function(data) {
                    var xml = data.responseXML;
                    var markers = xml.documentElement.getElementsByTagName("marker");
                    for (var i = 0; i < markers.length; i++) {
                        var name = markers[i].getAttribute("name");
                        var prov = markers[i].getAttribute("prov");
                        var reg = markers[i].getAttribute("reg");
                        var view = markers[i].getAttribute("view");
                        var idkat = markers[i].getAttribute("idkat");
                        var point = new google.maps.LatLng(
                                parseFloat(markers[i].getAttribute("lat")),
                                parseFloat(markers[i].getAttribute("lng")));
                        var id = markers[i].getAttribute("id");
                        var img = markers[i].getAttribute("img");
                        var cat = markers[i].getAttribute("cat");
                        var loc = markers[i].getAttribute("loc");
                        var html = "<div class='popup-marker'><h3 class='map-title'>" + name + "</h3><img class='map_img' width='100%' src='<?php echo base_url()?>/Images/Post_Thumb/"+img+"' height='auto'/>\n\
                                <span>Category : </span>"+cat+" <span>Location : </span>"+loc+"<a href='<?php echo site_url('Home/post/"+id+"')?>' class='btn-map-more'><i class='fa fa-send'></i></a>";
                        var icon = customIcons[idkat] || {};
                        var marker = new google.maps.Marker({
                            map: map,
                            position: point,
                            icon: icon.icon
                        });
                        bindInfoWindow(marker, map, infoWindow, html);
                        google.maps.event.addListener(marker, 'click', (function(marker, i) {
                            return function() {
                                infowindow.setContent("Info on member here");
                                infowindow.open(map, marker);
                            }
                        })(marker, i));
                        cluster.push(marker);
                    }
                    var mc = new MarkerClusterer(map, cluster);
                });
            }

            function bindInfoWindow(marker, map, infoWindow, html) {
                // Bagian ini untuk memamnggil infowindow baru untuk viewmoremg src='<?php echo base_url()?>/Images/Post_Thumb/" + img + "' width='180' height='90'/></td><td valign='top' height='20'>
                google.maps.event.addListener(marker, 'click', function() {
                    infoWindow.setContent(html);
                    infoWindow.open(map, marker);
                });
            }

            function downloadUrl(url, callback) {
                var request = window.ActiveXObject ?
                        new ActiveXObject('Microsoft.XMLHTTP') :
                        new XMLHttpRequest;

                request.onreadystatechange = function() {
                    if (request.readyState == 4) {
                        request.onreadystatechange = doNothing;
                        callback(request, request.status);
                    }
                };

                request.open('GET', url, true);
                request.send(null);
            }

            function doNothing() {
            }

        </script>
        <script type="text/javascript">
        $('document').ready(function(){
            $('#recent-post a').tooltip();
        });
        </script>
    </head>

    <?php if (isset($map_latitude) && isset($map_longitude) && isset($map_zoom)) { ?>
        <body onload="load(<?php echo $map_latitude ?>, <?php echo $map_longitude ?>, <?php echo $map_zoom ?>)">
        <?php } else { ?>
        <body>
            <?php
        }
        ?>
        <nav id="topnav" class="col-md-12">
            <div class="container">
                <?php if (isset($logo)) { ?>
                    <span id="top-logo">
                        <a href="<?php echo base_url(); ?>">
                            <img src="<?php echo base_url() ?>/Images/logo.png" class="img-responsive" width="190"/>
                        </a>
                    </span>
                <?php } ?>
                <?php if (isset($_COOKIE['c_username'])) { ?>
                    <div id="loggedin" class="pull-right" style="position: relative">
                        <span id="user-fullname">
                            <?php echo $_COOKIE['c_fullname'] ?>
                            <small><?php echo $_COOKIE['c_username'] ?></small>
                        </span>
                        <a style="vertical-align: 13px;display:inline-block" href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <?php if (isset($_COOKIE['c_ava'])) { ?>
                            <img src="<?php echo base_url() ?>/Images/User_Avatar/<?php echo $_COOKIE['c_ava'] ?>" class="img-circle" width="45" height="45"/>
                            <?php } else { ?>
                            <img src="<?php echo base_url() ?>/Images/User_Avatar/default-ava.png" class="img-circle" width="45" height="45"/>
                            <?php } ?>
                        </a>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="<?php echo site_url('User/new_entry') ?>"><i class="fa fa-plus-square fa-fw"></i> Write a Post</a>
                            </li>
                            <li>
                                <a href="<?php echo site_url('User/profile') ?>"><i class="fa fa-photo fa-fw"></i> View Profile</a>
                            </li>
                            <li>
                                <a href="<?php echo site_url('Login/logout') ?>"><i class="fa fa-power-off fa-fw"></i> Logout</a>
                            </li>
                        </ul>
                    </div>
                <?php } else { ?>
                    <a id="btn-login" data-toggle="modal" href="#myModal" class="btn btn-blue btn-sm">Login</a>
                <?php } ?>
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                <h2 class="modal-title">Login to Travelina</h2>
                            </div>
                            <div class="modal-body">
                                <form id="frm-user-login" action="<?php echo site_url('Login/cek_login') ?>" method="post">
                                    <label>Username</label>
                                    <div class="input-group input-group-lg">
                                        <span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
                                        <input type="text" name="frm_username" class="form-control input-lg" placeholder="Username">
                                    </div>
                                    <label>Password</label>
                                    <div class="input-group input-group-lg">
                                        <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
                                        <input type="password" name="frm_password" class="form-control input-lg" placeholder="Password">
                                    </div>
                                    <button class="btn btn-login" type="submit" name="btn-login">Login</button>
                                    <small>Don't have an account? <a href="<?php echo site_url('Home/register') ?>">Register Here</a></small>
                                </form>
                            </div>
                        </div><!-- /.modal-content -->
                    </div><!-- /.modal-dialog -->
                </div>
            </div>            
        </nav>

        <?php $this->load->view("Home_inc/i_$page") ?>

        <footer id="footer">
            <div class="container">
                <div class="foot-col col-md-3">
                    <ul>
                        <li><a href="#">About Travelina</a></li>
                        <li><a href="#">Contacts</a></li>
                        <li><a href="#">Privacy Policies</a></li>
                    </ul>
                </div>
                <div class="foot-col col-md-3">
                    <ul>
                        <li><a href="#">Sitemap</a></li>
                        <li><a href="#">Subscribe by Email</a></li>
                    </ul>
                </div>
                <div class="foot-col col-md-3">
                    <ul>
                        <li><a href="#">Looking For Job?</a></li>
                        <li><a href="#">Advertise</a></li>
                    </ul>
                </div>
            </div>
        </footer>
        <div id="credit">
            <div class="container">
                Copyright &copy; 2014. <a href="#">Travelina</a> | Indonesian Travel Destination Reviews
            </div>
        </div>
    </body>
</html>